Widget樂高積木

在開始實作App之前，我們需要認識 Flutter 程式架構的基本概念。

回顧 Flutter 的程式碼

我想要先帶大家理解一下Flutter應用程式的啟動過程，請查看程式碼上的編號以對應下方的說明。

// 1. flutter sdk material style framework
import 'package:flutter/material.dart';

// 2. 程式進入點
void main() => runApp(MyApp());

// 3. root widget
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

1. 這段是 import Flutter SDK 的語句， Dart 透過 pubspec.yaml 這隻 YAML 格式檔案描述該專案相關內容說明，這隻檔案記錄了引用的相依套件，你可以在 dependencies: 這邊找到 flutter sdk 的設定。Flutter 提供了兩種風格供使用，一個是 material design 風格設計；另一個則是 iOS 風格 的 cupertino，不管引用哪一套，其內部都提供了 Flutter 渲染引擎的運行環境。

2. 這邊是 dart 可執行程式的起點，其中 SDK 提供的函式 runApp 封裝了 Flutter 如何透過 root widget 建立整個 UI 畫面的行為，要深入了解底架架構的可以使用 IDE 追蹤一下 SDK 的原始碼。

3. 這個 widget 是我們的 root widget，可以看到這個類別繼承 StatelessWidget，並且 override build 的方法，方法回傳名為 MaterialApp 的 widget　類別實例。這個 widget 有許多命名參數的設定，對應畫面上的區塊內容。

從上述程式碼內容，我們可以發現 Flutter 主要是透過 widget 組合的方式，渲染出應用程式的介面。

Widgets介紹

在 Flutter 內是將 widget 以類似積木的方式組合出 Flutter 應用程式介面。從 root widget 開始組建成類似一個Tree的結構。

Flutter 會根據 widget 裡的狀態Tree上的節點進行管理，並在每一幀更新過程中根據 widget 中的 build 方法渲染畫面。

結構上抽象化可以拆分成下述樹的結構：

• Widget Tree

Widget Tree 負責管理整個介面的配置狀態，並在生成的過程中透過createElement方法產生對應的 Element Tree。

• Element Tree

Element Tree 負責管控 Widget Tree 上的節點，在節點狀態發生改變時透過 widget 的 build 方法重建新的畫面資料，並擔位 Widget Tree 與 RenderObject Tree 之間關聯的橋梁。

• RenderObject Tree

RenderObject Tree 負責處理渲染畫面上的計算工作，並將計算的結果傳遞給底層進行渲染畫面。

我們初步意識到這上述這些關係就好，後續我們在深入了解 widget 行為時會慢慢理解這幾層之間的關係。

小結

今日學習上認識了 widget 在 Flutter 中扮演的角色與定位，通常看到演算法談到有關樹(Tree)的章節時，腦袋總是會不自覺得昏昏欲睡，不過從前端人員的角度來看，這些 Tree 的概念跟 DOM (Document Object Model) 是很相近的，開發前端的過程好像也沒完全釐清 DOM 架構與節點的關係，反正我介面刻得出來就好 XDDD。